<!-- 通用配置-->
<template>
  <div>
    <!-- 折叠公共配置 -->
    <el-collapse accordion>
      <!-- 标题设置 -->
      <template v-if="main.vaildProp('titleList')">
        <el-collapse-item title="标题设置">
          <el-form-item label="标题">
            <avue-switch v-model="main.activeOption.titleShow"></avue-switch>
          </el-form-item>
          <el-form-item label="标题">
            <avue-input v-model="main.activeOption.title"></avue-input>
          </el-form-item>
          <el-form-item label="字体颜色">
            <avue-input-color v-model="main.activeOption.titleColor"></avue-input-color>
          </el-form-item>
          <el-form-item label="字体大小">
            <avue-input-number v-model="main.activeOption.titleFontSize"></avue-input-number>
          </el-form-item>
          <el-form-item label="字体位置">
            <avue-select v-model="main.activeOption.titlePostion"
                         :dic="dicOption.textAlign">
            </avue-select>
          </el-form-item>
          <el-form-item label="副标题">
            <avue-input v-model="main.activeOption.subtext"></avue-input>
          </el-form-item>
          <el-form-item label="字体颜色">
            <avue-input-color v-model="main.activeOption.subTitleColor"></avue-input-color>
          </el-form-item>
          <el-form-item label="字体大小">
            <avue-input-number v-model="main.activeOption.subTitleFontSize">
            </avue-input-number>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 轴设置 -->
      <template v-if="main.vaildProp('barList')">
        <el-collapse-item title="X轴设置">
          <el-form-item label="名称">
            <avue-input v-model="main.activeOption.xAxisName">
            </avue-input>
          </el-form-item>
          <el-form-item label="显示">
            <avue-switch v-model="main.activeOption.xAxisShow">
            </avue-switch>
          </el-form-item>
          <el-form-item label="显示箭头">
            <avue-switch v-model="main.activeOption.xAxisLineSymbol">
            </avue-switch>
          </el-form-item>
          <el-form-item label="显示网格线">
            <avue-switch v-model="main.activeOption.xAxisSplitLineShow">
            </avue-switch>
          </el-form-item>
          <el-form-item label="标签间距">
            <avue-switch v-model="main.activeOption.xAxisinterval">
            </avue-switch>
          </el-form-item>
          <el-form-item label="文字角度">
            <avue-input-number v-model="main.activeOption.xAxisRotate">
            </avue-input-number>
          </el-form-item>
          <el-form-item label="轴反转">
            <avue-switch v-model="main.activeOption.xAxisInverse">
            </avue-switch>
          </el-form-item>
          <el-form-item label="字号">
            <avue-input-number v-model="main.activeOption.xNameFontSize">
            </avue-input-number>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="Y轴设置">
          <el-form-item label="显示">
            <avue-switch v-model="main.activeOption.yAxisShow">
            </avue-switch>
          </el-form-item>
          <el-form-item label="名称">
            <avue-input v-model="main.activeOption.yAxisName">
            </avue-input>
          </el-form-item>
          <el-form-item label="名称位置">
            <avue-select v-model="main.activeOption.yAxisNameAlign"
                         :dic="dicOption.textAlign">
            </avue-select>
          </el-form-item>
          <el-form-item label="名称颜色">
            <avue-input-color v-model="main.activeOption.yAxisNameColor">
            </avue-input-color>
          </el-form-item>
          <el-form-item label="名称与轴线距离">
            <avue-slider v-model="main.activeOption.yAxisNameGap" :min="-50" :max="50">
            </avue-slider>
          </el-form-item>
          <el-form-item label="名称角度">
            <avue-slider v-model="main.activeOption.yAxisNameRotate" :min="-180" :max="180">
            </avue-slider>
          </el-form-item>
          <el-form-item label="显示坐标轴线">
            <avue-switch v-model="main.activeOption.yAxisLineShow">
            </avue-switch>
          </el-form-item>
          <el-form-item label="显示箭头">
            <avue-switch v-model="main.activeOption.yAxisLineSymbol">
            </avue-switch>
          </el-form-item>
          <el-form-item label="显示刻度">
            <avue-switch v-model="main.activeOption.yAxisTickShow">
            </avue-switch>
          </el-form-item>
          <el-form-item label="轴网格线">
            <avue-switch v-model="main.activeOption.yAxisSplitLineShow">
            </avue-switch>
          </el-form-item>
          <el-form-item label="反转">
            <avue-switch v-model="main.activeOption.yAxisInverse">
            </avue-switch>
          </el-form-item>
          <el-form-item label="字号">
            <avue-input-number v-model="main.activeOption.yNameFontSize">
            </avue-input-number>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 数值设置 -->
      <template v-if="main.vaildProp('labelList')">
        <el-collapse-item title="数值设置">
          <el-form-item label="显示">
            <avue-switch v-model="main.activeOption.labelShow">
            </avue-switch>
          </el-form-item>
          <el-form-item label="字体大小">
            <avue-input-number v-model="main.activeOption.labelShowFontSize">
            </avue-input-number>
          </el-form-item>
          <el-form-item label="字体颜色">
            <avue-input-color v-model="main.activeOption.labelShowColor">
            </avue-input-color>
          </el-form-item>
          <el-form-item label="字体粗细">
            <avue-select v-model="main.activeOption.labelShowFontWeight"
                         :dic="dicOption.fontWeight">
            </avue-select>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 提示语设置  -->
      <template v-if="main.vaildProp('tipList')">
        <el-collapse-item title="提示语设置">
          <el-form-item label="字体大小">
            <avue-input-number v-model="main.activeOption.tipFontSize"></avue-input-number>
          </el-form-item>
          <el-form-item label="字体颜色">
            <avue-input-color v-model="main.activeOption.tipColor"></avue-input-color>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 轴距离设置 -->
      <template v-if="main.vaildProp('postionList')">
        <el-collapse-item title="坐标轴边距设置">
          <el-form-item label="左边距(像素)">
            <avue-slider v-model="main.activeOption.gridX"
                         :max="400"></avue-slider>
          </el-form-item>
          <el-form-item label="顶边距(像素)">
            <avue-slider v-model="main.activeOption.gridY"
                         :max="400"></avue-slider>
          </el-form-item>
          <el-form-item label="右边距(像素)">
            <avue-slider v-model="main.activeOption.gridX2"
                         :max="400"></avue-slider>
          </el-form-item>
          <el-form-item label="底边距(像素)">
            <avue-slider v-model="main.activeOption.gridY2"
                         :max="400"></avue-slider>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 图例设置 -->
      <template v-if="main.vaildProp('legendList')">
        <el-collapse-item title="图例操作">
          <el-form-item label="图例">
            <avue-switch v-model="main.activeOption.legend"></avue-switch>
          </el-form-item>
          <el-form-item label="水平位置">
            <avue-select v-model="main.activeOption.legendPostion"
                         :dic="dicOption.textAlign">
            </avue-select>
          </el-form-item>
          <el-form-item label="布局朝向">
            <avue-select v-model="main.activeOption.legendOrient"
                         :dic="dicOption.orientList">
            </avue-select>
          </el-form-item>
          <el-form-item label="字体颜色">
            <avue-input-color v-model="main.activeOption.legendTextColor"></avue-input-color>
          </el-form-item>
          <el-form-item label="字体大小">
            <avue-input-number v-model="main.activeOption.legendFontSize">
            </avue-input-number>
          </el-form-item>
        </el-collapse-item>
      </template>
      <!-- 颜色设置 -->
      <template v-if="main.vaildProp('colorList')">
        <el-collapse-item title="自定义配色">
          <el-form-item label="文字颜色">
            <avue-input-color v-model="main.activeOption.nameColor">
            </avue-input-color>
          </el-form-item>
          <el-form-item label="轴线颜色">
            <avue-input-color v-model="main.activeOption.lineColor"></avue-input-color>
          </el-form-item>
          <avue-crud :option="colorOption"
                     :data="main.activeOption.barColor"
                     @row-save="rowSave"
                     @row-del="rowDel"
                     @row-update="rowUpdate"></avue-crud>
        </el-collapse-item>
      </template>
      <!-- 地图设置 -->
      <template v-if="main.vaildProp('mapList')">
        <el-collapse-item title="地图设置">
          <template v-if="main.activeOption.type===0">
            <el-form-item label="地图级别">
              <avue-select :dic="[{label: '国家', value: '国家'}, {label: '省级', value: '省级'}, {label: '市级', value: '市级'}]"
                           v-model="main.activeOption.mapLevel"
                           @change="changeMapLevel"
                           placeholder="请选择地图"></avue-select>
            </el-form-item>
            <el-form-item label="选择省份" v-if="main.activeOption.mapLevel === '省级'">
              <avue-select :dic="regionData"
                           v-model="main.activeOption.province"
                           @change="changeProvince"
                           placeholder="请选择省份"></avue-select>
            </el-form-item>
            <el-form-item label="选择城市" v-if="main.activeOption.mapLevel === '市级'">
              <el-cascader :options="regionData"
                           v-model="main.activeOption.city"
                           @change="changeCity"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="地图比例">
              <avue-slider v-model="main.activeOption.zoom"
                           :max="1"
                           :step="0.1"></avue-slider>
            </el-form-item>
            <el-form-item label="名称显示">
              <avue-switch v-model="main.activeOption.showGeoLabelName">
              </avue-switch>
            </el-form-item>
            <el-form-item label="字体大小">
              <avue-input-number v-model="main.activeOption.fontSize"></avue-input-number>
            </el-form-item>
            <el-form-item label="字体高亮颜色">
              <avue-input-color v-model="main.activeOption.empColor"></avue-input-color>
            </el-form-item>
            <el-form-item label="字体颜色">
              <avue-input-color v-model="main.activeOption.color"></avue-input-color>
            </el-form-item>
            <el-form-item label="区域线">
              <avue-input-number v-model="main.activeOption.borderWidth"></avue-input-number>
            </el-form-item>
            <el-form-item label="区域颜色">
              <avue-input-color v-model="main.activeOption.areaColor"></avue-input-color>
            </el-form-item>
            <el-form-item label="区域高亮颜色">
              <avue-input-color v-model="main.activeOption.empAreaColor"></avue-input-color>
            </el-form-item>
            <el-form-item label="边框颜色">
              <avue-input-color v-model="main.activeOption.borderColor"></avue-input-color>
            </el-form-item>

          </template>
          <template v-if="main.activeOption.type===1">
            <el-form-item label="图片地址">
              <avue-input v-model="main.activeOption.img"></avue-input>
            </el-form-item>
            <el-form-item label="地图比例">
              <avue-slider v-model="main.activeOption.scale"
                           :max="300"></avue-slider>
            </el-form-item>
          </template>
        </el-collapse-item>
      </template>
    </el-collapse>
  </div>
</template>

<script>
import { dicOption, colorOption } from '@/option/config'
// data
import regionData from '@/assets/data/regionData'
import  {url as backUrl} from '@/config'
export default {
  inject: ["main"],
  data () {
    return {
      dicOption: dicOption,
      colorOption: colorOption,
      backUrl,
      regionData
    }
  },
  methods: {
    rowSave (row, done) {
      this.main.activeOption.barColor.push(row);
      done()
    },
    rowDel (row, index) {
      this.main.activeOption.barColor.splice(index, 1);
    },
    rowUpdate (row, index, done) {
      this.main.activeOption.barColor.splice(index, 1, row);
      done()
    },
    changeMapLevel(value) {
      if(value === '国家') {
        this.main.activeOption.mapData = `${this.backUrl}/map/data/100000?name=国家`
      }
    },
    changeProvince(value) {
      if (value) {
        this.main.activeOption.mapData = `${this.backUrl}/map/data/${value}?name=${this.getLastRegion([value])}`
      }
    },
    changeCity(arr) {
      if (arr) {
        const name = this.getLastRegion(arr)
        const code = arr[arr.length - 1]
        this.main.activeOption.mapData = `${this.backUrl}/map/data/${code}?name=${name}`
      }
    },
    /**
     * 获取最后一级行政区名称
     * @param arr
     * @returns {string}
     */
    getLastRegion(arr) {
      if (arr instanceof Array) {
        let temp = regionData
        const length = arr.length
        for (let i = 0; i < length; i++) {
          const arrItem = arr[i]
          for (const n of temp) {
            if (arrItem === n.value) {
              if (i === (length - 1)) {
                return n.label
              } else {
                temp = n.children
                break
              }
            }
          }
        }
        console.error('区域code有误')
      }
    }
  }
}
</script>

<style>
</style>